<?php 
	include 'inc/header.php';
?>
    
    <!--页面头部-->
    <div class="page-title">
      <div class="title-env">
        <h1 class="title">添加销售产品</h1>
        <p class="description"></p>
      </div>
      <div class="breadcrumb-env">
        <ol class="breadcrumb bc-1">
          <li> <a href="index.php"><i class="fa-home"></i>首页</a> </li>
          <li> <a href="product-sale-list.php">销售产品管理</a> </li>
          <li class="active"> <strong>添加销售产品</strong> </li>
        </ol>
      </div>
    </div>
    
    <!--END 页面头部--> 
    
    <!--内容开始-->
    <div class="row">
      <div class="col-md-12"> 
        <script type="text/javascript">
				jQuery(document).ready(function($)
				{
					$(".multi-select").multiSelect({
						afterInit: function()
						{
							// Add alternative scrollbar to list
							this.$selectableContainer.add(this.$selectionContainer).find('.ms-list').perfectScrollbar();
						},
						afterSelect: function()
						{
							// Update scrollbar size
							this.$selectableContainer.add(this.$selectionContainer).find('.ms-list').perfectScrollbar('update');
						}
					});
					
					$(".selectboxit").selectBoxIt().on('open', function()
					{
						// Adding Custom Scrollbar
						$(this).data('selectBoxSelectBoxIt').list.perfectScrollbar();
					});
				});
			</script>
          
          
        <form role="forl" id="rootwizard" class="form-wizard validate">
        <ul class="tabs">
          <li class="active"> <a href="#fwv-1" data-toggle="tab"> 产品基本信息编辑 <span>1</span> </a> </li>
          <li> <a href="#fwv-2" data-toggle="tab"> 产品构成编辑 <span>2</span> </a> </li>
          <li> <a href="#fwv-3" data-toggle="tab"> 视觉信息编辑 <span>3</span> </a> </li>
          <li> <a href="#fwv-4" data-toggle="tab"> 上架管理 <span>4</span> </a> </li>
        </ul>
        <div class="progress-indicator"> <span></span> </div>
        <div class="tab-content no-margin">
        
        <!-- Tabs Content --> 
        
        <!--产品基本信息编辑 TAB-->
        <div class="tab-pane with-bg active" id="fwv-1">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="control-label" for="full_name">产品名称</label>
                <input class="form-control" name="full_name" id="full_name" data-validate="required" placeholder="请输入产品名称" />
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="control-label" for="birthdate">产品编号</label>
                <input class="form-control" name="birthdate" id="birthdate" placeholder="Pre-formatted birth date" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="control-label" for="full_name">产品分类</label>
                <select class="form-control">
                  <option>选择产品分类</option>
                  <option>Option 2</option>
                  <option>Option 3</option>
                  <option>Option 4</option>
                  <option>Option 5</option>
                </select>
              </div>
            </div>
          </div>
          <div class="h10px"></div>
          <div class="form-group-separator"></div>
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label class="control-label">销售价</label>
                <div class="">
                  <div class="input-group"> <span class="input-group-addon">￥</span>
                    <input type="text" class="form-control" placeholder="">
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label class="control-label">成本价</label>
                <div class="">
                  <div class="input-group"> <span class="input-group-addon">￥</span>
                    <input type="text" class="form-control" placeholder="">
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label class="control-label">市场价</label>
                <div class="">
                  <div class="input-group"> <span class="input-group-addon">￥</span>
                    <input type="text" class="form-control" placeholder="">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="h10px"></div>
          <div class="form-group-separator"></div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label" for="about">产品简介</label>
                <textarea class="form-control autogrow" name="about" id="about" data-validate="minlength[10]" rows="2" placeholder="请保证产品简介不超过20个字"></textarea>
              </div>
            </div>
          </div>
        </div>
        
        <!--产品构成编辑TAB-->
        <div class="tab-pane with-bg" id="fwv-2">
          <div class="row">
            <div class="col-md-12">
              <button class="btn btn-secondary">添加基础产品</button>
            </div>
          </div>
          <div class="h10px"></div>
          <div class="form-group-separator"></div>
          <div class="row">
            <div class="col-md-12">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th><input type="checkbox"></th>
                    <th>产品名称</th>
                    <th>编号</th>
                    <th>供应商</th>
                    <th>规格</th>
                    <th width="130">数量</th>
                  </tr>
                </thead>
                <tbody>
                  <!--LINE-->
                  <tr>
                    <td><input type="checkbox"></td>
                    <td>阿克苏苹果</td>
                    <td>111123</td>
                    <td>上海-果王</td>
                    <td>500g/只</td>
                    <td><!--计数器-->
                      
                      <div class="input-group spinner" data-step="1"> <span class="input-group-btn">
                        <button class="btn btn-gray" data-type="decrement">-</button>
                        </span>
                        <input type="text" class="form-control text-center" value="1">
                        <span class="input-group-btn">
                        <button class="btn btn-gray" data-type="increment">+</button>
                        </span> </div>
                      
                      <!--END 计数器--></td>
                  </tr>
                  <!--END LINE--> 
                  
                  <!--LINE-->
                  <tr>
                    <td><input type="checkbox"></td>
                    <td>阿克苏苹果</td>
                    <td>111123</td>
                    <td>上海-果王</td>
                    <td>500g/只</td>
                    <td><!--计数器-->
                      
                      <div class="input-group spinner" data-step="1"> <span class="input-group-btn">
                        <button class="btn btn-gray" data-type="decrement">-</button>
                        </span>
                        <input type="text" class="form-control text-center" value="1">
                        <span class="input-group-btn">
                        <button class="btn btn-gray" data-type="increment">+</button>
                        </span> </div>
                      
                      <!--END 计数器--></td>
                  </tr>
                  <!--END LINE--> 
                  
                  <!--LINE-->
                  <tr>
                    <td><input type="checkbox"></td>
                    <td>阿克苏苹果</td>
                    <td>111123</td>
                    <td>上海-果王</td>
                    <td>500g/只</td>
                    <td><!--计数器-->
                      
                      <div class="input-group spinner" data-step="1"> <span class="input-group-btn">
                        <button class="btn btn-gray" data-type="decrement">-</button>
                        </span>
                        <input type="text" class="form-control text-center" value="1">
                        <span class="input-group-btn">
                        <button class="btn btn-gray" data-type="increment">+</button>
                        </span> </div>
                      
                      <!--END 计数器--></td>
                  </tr>
                  <!--END LINE--> 
                  <!--LINE-->
                  <tr>
                    <td><input type="checkbox"></td>
                    <td>阿克苏苹果</td>
                    <td>111123</td>
                    <td>上海-果王</td>
                    <td>500g/只</td>
                    <td><!--计数器-->
                      
                      <div class="input-group spinner" data-step="1"> <span class="input-group-btn">
                        <button class="btn btn-gray" data-type="decrement">-</button>
                        </span>
                        <input type="text" class="form-control text-center" value="1">
                        <span class="input-group-btn">
                        <button class="btn btn-gray" data-type="increment">+</button>
                        </span> </div>
                      
                      <!--END 计数器--></td>
                  </tr>
                  <!--END LINE-->
                  
                </tbody>
                <tfoot>
                <div class="row">
                  <div class="col-sm-6">
                    <div class="pull-left">
                      <button class="btn btn-gray btn-sm btn-icon"> <span>批量删除</span> </button>
                      <button class="btn btn-gray btn-sm btn-icon"> <span>清空</span> </button>
                    </div>
                  </div>
                  <div class="col-sm-6"> <span class="pull-right">产品估计重量 150g</span> </div>
                </div>
                  </tfoot>
                
              </table>
              <div class="h10px"></div>
            </div>
          </div>
        </div>
        
        <!--视觉信息编辑-->
        
        <div class="tab-pane with-bg" id="fwv-3">
        <div class="row">
          <div class="col-md-6"> <strong>基本图片编辑区域</strong> <br />
            <br />
            <div class="col-sm-8">
              <input type="file" class="form-control" id="field-4">
            </div>
            <div class="col-sm-4">
              <button class="btn btn-gray btn-sm btn-icon"> <i class="fa-link"></i> <span>上传</span> </button>
            </div>
            <!-- 上传图片完毕以后自动显示图片！--> 
            
          </div>
          <div class="col-md-6"> <strong>APP 图片编辑</strong> <br />
            <br />
            <div class="col-sm-8">
              <input type="file" class="form-control" id="field-4">
            </div>
            <div class="col-sm-4">
              <button class="btn btn-gray btn-sm btn-icon"> <i class="fa-link"></i> <span>上传</span> </button>
            </div>
            <!-- 上传图片完毕以后自动显示图片！--> 
          </div>
        </div>
        <br />
        <br />
        <div class="row">
        <div class="col-md-12">
        <label class="control-label" for="other_qualifications"><strong>商品详情编辑</strong></label>
        <!--编辑器区域-->
        <form role="form" method="post">
          <div class="form-group">
            <textarea class="form-control ckeditor" rows="10">

					</textarea>
          </div>
        </form>
        <!--END 编辑器区域--> 
        
      </div>
    </div>
  </div>
  
  <!--上架管理-->
  <div class="tab-pane with-bg" id="fwv-4">
    <div class="row">
      <div class="col-md-12"> <a href="javascript:;" onclick="showAjaxModal();" class="btn btn-primary btn-single btn-sm">添加销售大仓</a> </div>
    </div>
    <div class="h10px"></div>
    <div class="form-group-separator"></div>
    <div class="row">
      <div class="col-md-12">
        <table class="table table-striped">
          <thead>
            <tr>
              <th><input type="checkbox"></th>
              <th>仓库名称</th>
              <th>城市</th>
              <th width="130">上架开关</th>
            </tr>
          </thead>
          <tbody>
            <!--LINE-->
            <tr>
              <td><input type="checkbox"></td>
              <td>仓库名称</td>
              <td>上海</td>
              <td><input type="checkbox" checked="" class="iswitch iswitch-secondary"></td>
            </tr>
            <!--END LINE-->
            
          </tbody>
          <script type="text/javascript">
			function showAjaxModal()
			{
				jQuery('#modal-7').modal('show', {backdrop: 'static'});
				
				jQuery.ajax({
					url: "data/ajax-content.txt",
					success: function(response)
					{
						jQuery('#modal-7 .modal-body').html(response);
					}
				});
			}
			</script>
          <tfoot>
          <div class="row">
            <div class="col-sm-6">
              <div class="pull-left">
                <button class="btn btn-gray btn-sm btn-icon"> <span>批量删除</span> </button>
                <button class="btn btn-gray btn-sm btn-icon"> <span>清空</span> </button>
              </div>
            </div>
          </div>
            </tfoot>
          
        </table>
        <div class="h10px"></div>
        <button type="submit" class="btn btn-primary">完成产品添加</button>
      </div>
    </div>
  </div>
  
  <!-- Tabs Pager -->
  
  <ul class="pager wizard">
    <li class="previous"> <a href="#"><i class="entypo-left-open"></i> 上一步</a> </li>
    <li class="next"> <a href="#">下一步 <i class="entypo-right-open"></i></a> </li>
  </ul>
</div>
</form>
</div>
<!--END COL-->
</div>
<!--END 内容开始--> 




<?php 
	include 'inc/footer.php';
?>
<!-- Imported scripts on this page --> 
<script src="assets/js/jquery-validate/jquery.validate.min.js"></script> 
<script src="assets/js/inputmask/jquery.inputmask.bundle.js"></script> 
<script src="assets/js/formwizard/jquery.bootstrap.wizard.min.js"></script> 
<script src="assets/js/datepicker/bootstrap-datepicker.js"></script> 
<script src="assets/js/multiselect/js/jquery.multi-select.js"></script> 
<script src="assets/js/jquery-ui/jquery-ui.min.js"></script> 
<script src="assets/js/selectboxit/jquery.selectBoxIt.min.js"></script> 
<!--CKDEITOR--> 
<script src="assets/js/ckeditor/ckeditor.js"></script> 
<script src="assets/js/ckeditor/adapters/jquery.js"></script>


<!-- Modal 7 (Ajax Modal)-->
<div class="modal fade" id="modal-7">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Dynamic Content</h4>
      </div>
      <div class="modal-body"> Content is loading... </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-info">Save changes</button>
      </div>
    </div>
  </div>
</div>